<template>
	<div>
		<!-- 导航部分开始 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>主数据</el-breadcrumb-item>
			<el-breadcrumb-item>物料产品分类</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 导航部分结束 -->

		<!--  搜索栏开始 -->
		<el-form style="margin-top: 15px;" :inline="true" :model="queryItem" class="demo-form-inline">
			<el-form-item label="分类名称">
				<el-input v-model="queryItem.itemTypeName" placeholder="请输入分类名称" clearable />
			</el-form-item>
			<el-form-item label="是否启用">
				<el-select v-model="queryItem.enableFlag" placeholder="选择是或否" clearable>
					<el-option v-for="item in isEnable" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="search">搜索</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="reLoad">重置</el-button>
			</el-form-item>
		</el-form>
		<!--  搜索栏结束 -->
		<!-- 表格 开始 -->
		<el-table :data="items"  
		:tree-props="{children: 'children'}"
		row-key="itemTypeId"
		default-expand-all>
			<el-table-column prop="itemTypeName" label="分类" width="260"></el-table-column>
			<el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
			<el-table-column prop="itemOrProduct" label="物料/产品" width="200"></el-table-column>
			<el-table-column prop="enableFlag" label="是否启用" width="100">
				<template #default="scope">
					<!-- scope.row 就是整行数据-->
					<el-tag v-if="scope.row.enableFlag == 'Y'" class="ml-2" type="success">是</el-tag>
					<el-tag v-else class="ml-2" type="danger">否</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" align="center" prop="createTimeMillis" width="200" :formatter="timeFormatter">
			</el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template #default="scope">
					<el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
					<el-button size="small"  @click="handleAdd(scope.row)" type="primary">新增</el-button>
					<el-button v-if="scope.row.parentTypeId!=0" size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>	
				</template>
			</el-table-column>
		</el-table>

		<!-- 表格 结束 -->

		<!-- 添加分类的弹窗窗体开始-->
		<el-dialog v-model="addItemDialogVisible" title="添加分类" width="600" align-center>
			<!-- 添加用户的表单 -->
			<el-form  :model="newItem" >
				<el-form-item  
				 label="父分类" style="width: 270px;">
				    <el-input readonly v-model="newItem.parentTypeName"  />
				</el-form-item>
				<el-row :gutter="5">
					<el-col :span="12">
			    <el-form-item label="分类名称" style="width: 270px;">
			        <el-input v-model="newItem.itemTypeName"  placeholder="请输入分类名称"/>
			    </el-form-item>
				</el-col>
				<el-col :span="12">
			    <el-form-item label="显示排序">
			        <el-input-number v-model="newItem.orderNum" :min="1" :max="10"  />
			    </el-form-item>
				</el-col>
				</el-row>
				<el-row :gutter="5">
					<el-col :span="12">
				<el-form-item label="物料/产品">
				    <el-radio-group v-model="newItem.itemOrProduct" class="ml-4">
				        <el-radio label="item" size="large">物料</el-radio>
				        <el-radio label="product" size="large">产品</el-radio>
				    </el-radio-group>
				</el-form-item>
				</el-col>
				<el-col :span="12">
				<el-form-item label="启用状态">
				    <el-radio-group v-model="newItem.enableFlag" class="ml-4">
				        <el-radio label="N" size="large">否</el-radio>
				        <el-radio label="Y" size="large">是</el-radio>
				    </el-radio-group>
				</el-form-item>
				</el-col>
				</el-row>
			</el-form>
			<template #footer>
			    <span class="dialog-footer">
					<el-button type="primary" @click="doTypeAdd">确定</el-button>
			        <el-button @click="cancelTypeAdd">取消</el-button> 
			    </span>
			</template>
		</el-dialog>
		<!-- 添加分类的弹窗窗体结束-->
		
		<!-- 修改分类的弹窗窗体开始-->
		<el-dialog v-model="itemEditDrawer" title="修改分类" width="600" align-center>
		    <!-- 添加用户的表单 -->
		    <el-form  :model="editItem" >
				<el-form-item v-if="this.editItem.parentTypeId!=0" 
				 label="父分类" style="width: 270px;">
				    <el-input readonly v-model="editItem.parentTypeName"  />
				</el-form-item>
				<el-row :gutter="5">
					<el-col :span="12">
		        <el-form-item label="分类名称" style="width: 270px;">
		            <el-input v-model="editItem.itemTypeName"  placeholder="请输入车间编码"/>
		        </el-form-item>
				</el-col>
				<el-col :span="12">
		        <el-form-item label="显示排序">
		            <el-input-number v-model="editItem.orderNum" :min="1" :max="10"  />
		        </el-form-item>
				</el-col>
				</el-row>
				<el-row :gutter="5">
					<el-col :span="12">
				<el-form-item label="物料/产品">
				    <el-radio-group v-model="editItem.itemOrProduct" class="ml-4">
				        <el-radio label="item" size="large">物料</el-radio>
				        <el-radio label="product" size="large">产品</el-radio>
				    </el-radio-group>
				</el-form-item>
				</el-col>
				<el-col :span="12">
				<el-form-item label="启用状态">
				    <el-radio-group v-model="editItem.enableFlag" class="ml-4">
				        <el-radio label="N" size="large">否</el-radio>
				        <el-radio label="Y" size="large">是</el-radio>
				    </el-radio-group>
				</el-form-item>
				</el-col>
				</el-row>
		    </el-form>
		    <template #footer>
		        <span class="dialog-footer">
					<el-button type="primary" @click="doTypeEdit">确定</el-button>
		            <el-button @click="cancelTypeEdit">取消</el-button> 
		        </span>
		    </template>
		</el-dialog>
		<!-- 修改分类的弹窗窗体结束-->

		
	</div>
</template>
<script>
	import itemRequest from '../../../api/mdItem-api.js';
	import tools from '../../../util/tools.js';
	import dictDatRequest from '../../../api/dict-data-api.js';
	import measureRequest from '../../../api/mdUnitMeasure-api.js';
	import itemTypeRequest from '../../../api/mdItemType-api.js';
	export default {
		data() {
			return {
				queryItem: {}, // 分装查询字典条件的字典对象
				items: [], // 字典数据列表
				
				//搜索框是否禁用选择器属性
				isEnable: [{
						value: 'Y',
						label: '是'
					},
					{
						value: 'N',
						label: '否'
					}
				],

				// 新增物料相关属性
				addItemDialogVisible: false, // 新增字典的弹窗标志
				newItem: {}, // 封装新增的字典信息
				currItem: {}, // 保存正在操作的字典信息
				item: "item",
				product: "product",

				//编辑物料相关属性
				itemEditDrawer: false,
				editItem: {},



				// 物料编码数据管理相关属性
				itemCodeDataAttr: {
					itemCodeManagerDialogVisible: false, //物料编码数据管理的弹窗标志 
					additemCodeDataDialogVisible: false, // 新增物料编码数据的弹窗标志
					itemDatas: [], // 字典数据列表
					newData: {}, // 封装新增字典数据对象
				}
			}
		},
		methods: {
			search(){
				// console.log("搜索"+this.queryItem);
				itemTypeRequest.search(this.queryItem,res=>{
					// console.log(res.data);
					this.items = res.data;
					// console.log(this.items);
				});
			},
			/**
			 * 时间毫秒数转换为对应的字符串
			 * @param {*} time 
			 */
			timeFormatter(row, column, time) {
				return tools.timeMillisToString(time);
			},
			/**
			 * 行新增分类前的一些操作
			 * @param {Object} row
			 */
			handleAdd(row){
				console.log(row);
				this.currItem = row;
				this.addItemDialogVisible = true;
				this.newItem.parentTypeName = row.itemTypeName;
				// if(row.parentTypeId == 0 || row.parent == 1){
				// 	this.newItem.parentTypeName = row.itemTypeName;
				// }
				// else{
				// itemTypeRequest.selectById(row.parentTypeId, res => {	//根据父分类ID找到分类名并赋给parentTypeName
				// 	this.newItem.parentTypeName = res.data.itemTypeName;
				// });
				// }
				
			},
			/**
			 * 取消添加分类
			 */
			cancelTypeAdd(){
				this.addItemDialogVisible = false;
				this.newItem = {};
			},
			/**
			 * 确定添加分类
			 */
			doTypeAdd(){
				console.log("newItem为"+this.newItem);
				this.newItem.parentTypeId=this.currItem.itemTypeId;
				
				itemTypeRequest.save(this.newItem,res=>{
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "添加成功"
                    });
                    // 关闭窗体
                    this.cancelTypeAdd();
                    // 重新加载数据
                    this.loadItems();// 加载当前页
                } else if (res.code == 300) {
                    this.$message({
                        type: "warning",
                        message: res.msg
                    });
                } else {
                    this.$message({
                        type: "error",
                        message: "添加失败"
                    });
                }
            })
			},
			/**
			 * 取消修改分类
			 */
			cancelTypeEdit(){
				this.itemEditDrawer = false;
				this.editItem = {};
			},
			/**
			 * 确认修改分类
			 */
			doTypeEdit(){
            itemTypeRequest.edit(this.editItem, res => {
                console.log("*******")
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '修改分类成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.itemEditDrawer = false;
                    // 重新加载数据
                    this.loadItems();
                    // 将editUser制空
                    this.editItem = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '分类重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '修改失败',
                        type: 'error',
                    });
                }
            });
        },
			/**
			 * 重置物料表单
			 */
			reLoad() {
				this.queryItem = {};
				this.loadItems();
			},
			/**
			 * 行删除事件
			 * @param {} row 
			 */
			handleDelete(row) {
				if(row.parent == 1){
					this.$message({
						type: 'warning',
						message: '该分类下还有其他子类目，请先删除子类目'
					});
				}
				else{
					itemTypeRequest.delete(row.itemTypeId, res => {
						if (res.code == 200) {
							this.$message({
								type: 'success',
								message: '删除成功'
							});
							this.loadItems();
						} else {
							this.$message({
								type: 'error',
								message: '删除失败'
							})
						}
					});
				}
				
			},
			/**
			 * 行编辑事件
			 * @param {*} row 
			 */
			handleEdit(row) {
				// console.log(row);
				itemTypeRequest.selectById(row.itemTypeId, res => {
					//记录当前操作行的对象
					this.currItem = row;
					this.itemEditDrawer = true;
					this.editItem = res.data;
					itemTypeRequest.selectById(row.parentTypeId, res => {	//根据父分类ID找到分类名并赋给parentTypeName
						this.editItem.parentTypeName = res.data.itemTypeName;
					});
					
				});	
				
					
				
				
				
			},
			/**
			 * 加载字典数据
			 */
			loadItems() {
				itemTypeRequest.getAllItemTypes(res => {
					// console.log(res.data);
					// 设置数据
					this.items = res.data;
					// console.log(this.items);
				});
			}
		},
		mounted() {
			// 默认加载字典数据列表
			this.loadItems();
		}
	}
</script>